/*
 * @Author: xiehangyun 
 * @Date: 2025-05-10 18:26:16 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-10-18 16:02:02
 */

import { ArrowLeft } from '@nutui/icons-react-taro';
import { NavBar } from '@nutui/nutui-react-taro';
import { Image, Text, View } from '@tarojs/components';
import Taro from "@tarojs/taro";
import { ReactNode } from "react";
// 将相对路径修改为正确的上级目录
import logoPNG from "@/public/smallLogo.png"
import utilsStore from '../../utils/utilsStore';
import styles from "./customHeader.module.less";

import clsx from 'clsx';
import { observer } from "mobx-react-lite";

interface Iprops {
    children?: ReactNode;
    title?: string;
    showBack?: boolean;
    backIcon?: ReactNode;
    onBack?: () => void;
}

// 自定义头部 - 遵循规范：所有样式都必须写到对应的module.less文件中，但内联样式中有变量的情况除外
const CustomHeader = observer((props: Iprops) => {

    //返回路由
    const goBack = (e: any) => {
        e.stopPropagation();
        e.preventDefault();

        if (props.onBack) {
            props.onBack();
            return;
        }
        Taro.navigateBack({
            fail: (res: TaroGeneral.CallbackResult) => {
                Taro.switchTab({ url: '/pages/Index/Index' });
            }
        });
    };

    return (
        <View
            className={clsx(styles.customHeader)}
            style={{
                paddingTop: utilsStore.safeAreaTop,
                height: utilsStore.titleTop
            }}
        >
            <NavBar
                className={styles.navBar}
                back={props.showBack ? (props.backIcon || <ArrowLeft />) : null}
                right={null}
                onBackClick={goBack}
                style={{ lineHeight: '44' }}
            >
                <Image className={styles.icon} src={logoPNG} />
                <Text className={styles.title}>{props.title || '全民制定'}</Text>
            </NavBar>
            <View className={styles.footer} >
                {props.children}
            </View>
        </View>
    );
});

export default CustomHeader;